<html> 
    <head> 
        <title>Getting Started Example</title> 
        <link rel="stylesheet" type="text/css" 
              href="/extjs/resources/css/ext-all.css" /> 
        <script src="/extjs/adapter/ext/ext-base.js"></script> 
        <script src="/extjs/ext-all-debug.js"></script>
        <script src="other.js"></script>
        <script>
            Ext.QuickTips.init();
            if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') { 
                Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif'; 
            }         
            
            var dsprovince =  new Ext.data.JsonStore({  
                url: 'readprovince.php',
                root: 'rows',
                fields: [
                    'id',
                    'name'
                ],                
                autoLoad: true
            });
            
            var dskabkota =  new Ext.data.JsonStore({  
                url: 'readkabkota.php',
                root: 'rows',
                fields: [
                    'id',
                    'name'
                ],
                baseParams: {province_id: 1},
                autoLoad: false
            });
            
            var myform = function(){
                var my_form = new Ext.FormPanel({
                    url: 'save_form.php',
                    renderTo: Ext.getBody(),
                    frame: true,
                    title: 'My Form',
                    width: 600,
                    items: [{
                            xtype: 'textfield',
                            fieldLabel: 'User Name',
                            name: 'username',
                            allowBlank : false,
                            vtype: 'alpha'                             
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Password',
                            name: 'password1',
                            allowBlank : false,
                            vtype: 'alphanum',
                            inputType: 'password'
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Retype Password',
                            name: 'password2',
                            allowBlank : false,
                            vtype: 'alphanum',
                            inputType: 'password'
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Full Name',
                            name: 'realname',                           
                            allowBlank:false
                        },{  
                            xtype: 'radiogroup',  
                            columns: 1,  
                            fieldLabel: 'Jenis Kelamin',  
                            name: 'jenkel',  
                            items: [{  
                                    name: 'jenkel',  
                                    boxLabel: 'Laki-laki',  
                                    inputValue: '1'  
                                },{  
                                    name: 'jenkel',  
                                    boxLabel: 'Perempuan',  
                                    inputValue: '0'  
                                }]  
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Address',
                            name: 'address',
                            width:300,
                            allowBlank:false
                        },{  
                            xtype: 'combo',  
                            hiddenName: 'province',  
                            fieldLabel: 'Province',  
                            mode: 'local',  
                            store: dsprovince,  
                            displayField:'name',  
                            valueField:'id',  
                            width: 120,
                            listeners:{
                                'select': function(cmb){
                                    dskabkota.load({params: {province_id: cmb.value}})
                                }
                            }                                                        
                        },{  
                            xtype: 'combo',  
                            hiddenName: 'kabkota',  
                            fieldLabel: 'Kabupaten/Kota',  
                            mode: 'local',  
                            store: dskabkota,  
                            displayField:'name',  
                            valueField:'id',  
                            width: 120  
                        },{
                            xtype: 'datefield', 
                            fieldLabel: 'DOB', 
                            name: 'dob',
                            allowBlank:false,
                            format : 'Y-m-d',
                            showToday : true
                        },{  
                            xtype: 'htmleditor',  
                            name: 'description',
                            fieldLabel:'Description',
                            hideLabel: false,  
                            height: 100,  
                            anchor: '100%',
                            allowBlank:false
                        }],
                    buttons: [{
                            text: 'Save',
                            handler: function(){
                                my_form.getForm().submit({
                                    success: function(form, action){
                                        Ext.Msg.alert('Success', action.result.msg);
                                        my_form.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        Ext.Msg.alert('Warning', action.result.msg);
                                    }
                                });
                            }
                        }, {
                            text: 'Reset',
                            handler: function(){
                                my_form.getForm().reset();
                            }
                        }]

                });
            }
            
            Ext.onReady(myform);
        </script>
    </head> 
    <body> 
        <!-- Nothing in the body --> 
    </body> 
</html>